<template>
  <div>
    <el-dialog
      :title="type == 'balance' ? '提现申请' : '积分兑换'"
      :visible.sync="isShow"
      center
      width="40%"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item :label="type == 'balance' ? '提现余额' : '兑换积分'" prop="money">
          <el-input v-model="ruleForm.money" :placeholder="frozenPoints"></el-input>
        </el-form-item>
        <!-- <div class='prompt'>
          <span>
            有 <span class='el-blue'> {{ frozenPoints }}</span> {{ type == 'balance' ? '余额不可提现' : '积分不可兑换' }}
          </span>
        </div> -->
        <el-form-item label="备注" prop="comment" v-if="type == 'balance'">
          <!-- <el-input type="textarea" v-model="ruleForm.comment"></el-input> -->
          <el-input v-model="ruleForm.comment"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // var validateMoney = (rule, value, callback) => {
    //   console.log(this.minWithdrawalAmount)


    // }
    return {
      isShow: false,
      ruleForm: {
        money: '',
        comment: ''
      },
      type: null,
      rules: {
        money: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error(`请输入${this.type == 'balance' ? "提现余额" : '兑换积分' }`));
              } else {
                if (!Number(value)) {
                  callback(new Error(`请输入正确的${this.type == 'balance' ? "余额" : '积分' }`));
                } else if (value < this.minWithdrawalAmount) {
                  callback(new Error(`${this.type == 'balance' ? "提现余额" : '兑换积分' }必须大于等于${this.minWithdrawalAmount}`));
                }
                else {
                  callback()
                }
              }
            },
            trigger: 'blur' }
        ]
      },
      minWithdrawalAmount: '',
      frozenPoints: ''
    }
  },
  created () {
    
  },
  methods: {
    show (data) {
      if (this.$store.state.user.vip == 0) {
        this.$alert('您暂未开通vip服务，无法提现！', '温馨提示!', {
          confirmButtonText: '确定',
          center: true,
          callback: action => {
          }
        })
      } else {
        this.isShow = true
        this.type = data.type
        if (data.frozenPoints != 0) {
          this.frozenPoints = `有${data.frozenPoints}${this.type == 'balance' ? '元余额不可提现' : '积分不可兑换'}`
        }
        this.getWithdrawalAmount()
      }

      
    },
    // 获取提现额度
    getWithdrawalAmount () {
      this.$axios.get('api/activity/consumer_setting').then(res => {
        if (res.data.code == 200) {
          this.minWithdrawalAmount = res.data.data.min_exchange
        }
      }).catch( error => {
        this.$message.error(error)
      })
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPost()
        } else {
          return false
        }
      });
    },
    submitPost () {
      let params = {

      }
      if (this.ruleForm.comment != '') {
        params.comment = this.ruleForm.comment
      }
      let url = 'api/drawing/consumer_points_coin'
      if (this.type == 'balance') {
        url = 'api/drawing/consumer'
        params.money = this.ruleForm.money
      } else {
        params.points = this.ruleForm.money
      }
      this.$axios.post(url, params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: "发起提现成功"
          })
          this.$emit('refresh')
          this.handleClose()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      }).catch(err => {

      })
    },
    handleClose () {
      this.isShow = false
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .el-form {
    .prompt {
      font-size: 12px;
      margin: 0 0 10px 100px ;
    }
  }
</style>
